<template>
  <div>
      <div class="footer-box">
      <div class="footer">
        <div class="warp">
          <div class="f_nav">
            <ul v-for="(item, index) in data" :key="index">
              <th class="f_nav_tit">
                <li>{{ item.label }}</li>
              </th>
              <li v-for="(child, i) in item.children" :key="i">
                <el-link>{{ child.label }}</el-link>
              </li>
            </ul>
          </div>
          <div class="f_bottomInfo"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        data:Array
    }
}
</script>

<style scoped>
.footer-box {
  width: 100%;
  height: 426px;
}
.footer {
  width: 1680px;
  margin: 0 111px;
  background: rgb(246, 247, 249);
}
.warp {
  width: 1230px;
  height: 426px;
  padding: 10px 15px;
  margin: 0 225px;
}
.f_nav > ul {
  display: inline-block;
  width: 200px;
}
.f_nav_tit {
  padding-bottom: 10px;
}
.f_nav > ul li {
  padding: 3px 0;
}
</style>